<template>
  <div class="home">
    <!-- 头部 -->
    <el-header>
      <div class="logo">
        <img src="../../assets/logo.jpg" alt />
      </div>
      <span class="title_name">人工道路作业系统</span>
      <!-- 用户 -->
      <div class="avatar" @mouseenter="avatarShow = true" @mouseleave="avatarShow = false">
        <el-avatar icon="iconfont icon-renxiang-copy-copy"></el-avatar>
        <span class="account_name">大厂</span>
        <div class="account_info" v-if="avatarShow">
          <!-- <span></span> -->
          <span @click="loginOut">退出登录</span>
        </div>
      </div>
    </el-header>
    <!-- 主体地图显示 -->
    <el-container style="height: 30%;">
      <!-- <el-aside>111</el-aside> -->
      <el-main>
        <!-- 顶部工具栏 -->
        <top-tool-bar />
        <!-- 地图显示 -->
        <map-view></map-view>
      </el-main>
      <el-aside>
        <vdr class="vdr" :w="200" :h="50" @resizing="resizeWidth" :draggable="false">
          <!-- 报警信息 -->
          <warning-view></warning-view>
        </vdr>
      </el-aside>
    </el-container>
    <!-- 底部信息列表 -->
    <el-footer>
      <vdr class="vdr" :w="200" :h="50" @resizing="resize" :draggable="false">
        <div ref="footerTitle" class="footer_title">人员信息监控列表</div>
        <monitoring-view></monitoring-view>
      </vdr>
    </el-footer>
    <div class="cover" v-if="coverIsShow" @click="closeCover"></div>
    <!-- 报警详情 -->
    <div class="warning_details" v-if="openWarningDetails">
      <h2>
        <span class="iconfont icon-jinggao1" />
        <span>人 员 报 警 信 息</span>
        <i class="iconfont icon-guanbi" @click="coverIsShow = false, openWarningDetails = flase" />
      </h2>
      <div class="warning_menu">
        <el-button class="iconfont icon-zhengque" type="success">解除报警</el-button>
        <el-button class="iconfont icon-shanchu" type="danger">删除报警</el-button>
        <span>
          报警数量：
          <span class="warning_nums">{{warningData.length}}</span> 条
        </span>
        <el-button class="iconfont icon-daochu excel"
          style="background-color: #1f7246; color: #fff; margin-left: 10px; border: 0 none;" @click="exportExcel">
          导出Excel</el-button>
        <el-button class="iconfont icon-shanchutubiao" type="danger">删除图标</el-button>
        <span>报警类型：</span>
        <el-select v-model="warningTypeValue" placeholder="请选择类型">
          <el-option value="全部"></el-option>
          <el-option v-for="(item,index) in warningTypeList" :key="index+'only'" :value="item" />
        </el-select>
        <span>分组：</span>
        <el-select v-model="warningGroupValue" placeholder="请选择分组" popper-class="group">
          <el-option v-for="(item,index) in warningGroupList" :value="item.CLIENT_NO" :label="item.CLIENT_NAME"
            :key="index"></el-option>
        </el-select>
        <el-button class="iconfont icon-sousuo" type="primary" @click="searchWarningData" style="margin-left: 10px;">
          报警查询</el-button>
      </div>
      <div class="warningContent">
        <el-table :data="warningData" border style="width: 100%" :default-sort="sort">
          <el-table-column prop="VID" label="人员编号" width="80" align="center"></el-table-column>
          <el-table-column prop="NAME" label="姓名" width="90" align="center"></el-table-column>
          <el-table-column prop="CLIENT_NO" label="班组编号" width="120" align="center"></el-table-column>
          <el-table-column prop="address" label="报警位置" align="center"></el-table-column>
          <el-table-column prop="ALARM_DATE" label="报警时间" width="180" align="center"></el-table-column>
          <el-table-column prop="LONGITUDE" label="经度" width="100" align="center"></el-table-column>
          <el-table-column prop="LATITUDE" label="纬度" width="100" align="center"></el-table-column>
          <el-table-column prop="ALARM_TYPE" label="报警类型" width="180" align="center"></el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
  // 引入顶部工具栏
  import topToolBar from '@/views/CleanerWork/TopToolbar/index.vue'

  // 引入地图组件
  import mapView from '@/views/CleanerWork/Map.vue'
  // 引入人员监控列表组件
  import monitoringView from '@/views/CleanerWork/Monitoring.vue'
  // 引入报警组件
  import warningView from '@/views/CleanerWork/Warning.vue'

  import eventBus from '@/eventBus.js'

  import export2Excel from '@/utils/exportExcel/index.js'

  export default {
    components: {
      'map-view': mapView,
      'monitoring-view': monitoringView,
      'warning-view': warningView,
      'top-tool-bar': topToolBar
    },
    data() {
      return {
        coverIsShow: false,
        originalData: [],
        warningData: [],
        warningType: [, 'SOS报警', '心跳异常报警', '长时间不动位置报警', '长时间离开作业区域报警', '长时间不上传位置报警', '一人多终端佩戴报警', '血压异常报警', '未知报警', , '开机', '关机', , , '低电量报警'],
        warningTypeList: [],
        warningTypeValue: '全部',
        warningGroupList: [],
        warningGroupValue: '0000004',
        sort: { prop: 'VID', order: 'ascending' },
        openWarningDetails: false,
        containerHeight: 0,
        footerHeight: 0,
        mainWidth: 0,
        asideWidth: 0,
        avatarShow: false
      }
    },
    mounted() {
      eventBus.$emit('mapSize', document.querySelector('.el-main').clientHeight - 32)
      this.containerHeight = document.querySelector('.el-container').clientHeight
      this.footerHeight = document.querySelector('.el-footer').clientHeight
      this.mainWidth = document.querySelector('.el-main').clientWidth
      this.asideWidth = document.querySelector('.el-aside').clientWidth
    },
    created() {
      eventBus.$on('isCover', val => {
        this.coverIsShow = val
      })
      // 报警信息列表
      eventBus.$on('warningData', val => {
        this.originalData = val.map(item => {
          item.ALARM_DATE = item.ALARM_DATE.replace('T', ' ').split('.')[0]
          if (item.ALARM_TYPE != null) {
            item.ALARM_TYPE = this.warningType[item.ALARM_TYPE]
          } else {
            item.ALARM_TYPE = '未知报警'
          }
          this.warningTypeList.push(item.ALARM_TYPE)
          return item
        })
        this.warningTypeList = new Set(this.warningTypeList)
        eventBus.$emit('warningNum', this.originalData.length)
        this.searchWarningData()
      })

      eventBus.$on('warningGroup', val => {
        this.warningGroupList = val
      })
      eventBus.$on('warningDetails', val => {
        this.openWarningDetails = val
        this.coverIsShow = val
      })
    },
    methods: {
      closeCover() {
        this.coverIsShow = false
        this.openWarningDetails = false
        eventBus.$emit('closeCover', false)
      },
      // 查询报警信息
      searchWarningData() {
        if (this.warningTypeValue !== '全部') {
          this.warningData = this.originalData.filter(item => this.warningTypeValue === item.ALARM_TYPE)
        } else {
          this.warningData = this.originalData
        }
        if (this.warningGroupValue !== '0000004') this.warningData = this.warningData.filter(item => this.warningGroupValue === item.CLIENT_NO)
      },
      // 导出Excel
      exportExcel() {
        const excelName = document.querySelector('.group li.selected span').innerText + '报警信息'
        const tHeader = ['人员编号', '姓名', '班组编号', '报警位置', '报警时间', '经度', '纬度', '报警类型']
        const filterVal = ['VID', 'NAME', 'CLIENT_NO', 'address', 'ALARM_DATE', 'LONGITUDE', 'LATITUDE', 'ALARM_TYPE']
        export2Excel(tHeader, filterVal, this.warningData, excelName)
      },
      // 信息列表窗口缩放
      resize(x, y) {
        document.querySelector('.el-footer').style.height = this.footerHeight - y + 'px'
        document.querySelector('.el-container').style.height = this.containerHeight + y + 'px'
        eventBus.$emit('mapSize', y)
      },
      // 报警列表信息缩放
      resizeWidth(x) {
        document.querySelector('.el-aside').style.width = this.asideWidth - x + 'px'
        document.querySelector('.el-main').style.width = this.mainWidth + x + 'px !important'
      },
      // 退出登录
      loginOut() {
        this.$router.replace({ path: '/traffic' })
        console.log(11111)
        this.avatarShow = false
      }
    }
  }
</script>

<style scoped lang="less">
  .home {
    height: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }

  .el-header {
    height: 60px;
    text-align: center;

    .logo {
      float: left;
      margin-left: 100px;
      line-height: 60px;

      img {
        height: 50px;
        vertical-align: middle;
      }
    }

    .title_name {
      line-height: 60px;
      font-size: 26px;
      color: #3baefa;
    }

    .avatar {
      line-height: 60px;
      float: right;
      margin-right: 100px;
      position: relative;

      .el-avatar {
        width: 36px;
        height: 36px;
        vertical-align: middle;
        border: 1px solid #ccc;
        margin-right: 10px;
        cursor: pointer;
        background-color: #f3f3f3;
      }

      .account_name {
        cursor: pointer;
        color: #3baefa;
      }

      .account_info {
        width: 100px;
        line-height: 20px;
        border: 1px solid #ccc;
        background-color: #fff;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        z-index: 1;

        span {
          display: block;
          text-align: center;
          line-height: 22px;
          color: #333;
          cursor: pointer;

          &:hover {
            color: #fff;
            background-color: #3baefa;
          }
        }
      }
    }
  }

  .el-container {
    flex: 1;
  }

  .top_box {
    display: flex;
    height: 594px;

    .sidebar {
      width: 200px;
      display: none;
    }

    .content {
      flex: 1;

      .content-box {
        display: flex;

        // position: relative;
        .map_view {
          flex: 1;
        }
      }
    }
  }

  .el-footer {
    width: 100%;
    min-height: 200px !important;

    // position: relative;
    // margin-bottom: 20px;
    .footer_title {
      line-height: 20px;
      background-color: #3baefa;
      color: #fff;
      cursor: s-resize;
    }
  }

  .el-aside {
    // height: 300px;
    overflow: hidden;

    /deep/.handle-tm {
      display: none !important;
    }
  }

  .cover {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.3);
    z-index: 1;
  }

  .warning_details {
    width: 1100px;
    height: 400px;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 4px;
    position: absolute;
    left: 50%;
    top: 400px;
    transform: translate(-50%, -50%);
    z-index: 2;
    overflow: hidden;
    padding-bottom: 10px;

    h2 {
      height: 40px;
      display: flex;
      align-items: center;
      padding-left: 5px;
      color: #666;
      border-bottom: 1px solid #ccc;

      span {
        margin-right: 5px;
      }

      i {
        margin-left: 922px;
      }
    }

    .warning_menu {
      height: 30px;
      border-bottom: 1px solid #ccc;
      // box-sizing: border-box;
      display: flex;
      align-items: center;
      padding-left: 5px;

      span {
        margin-left: 10px;
        display: flex;
        align-items: center;
        color: #666;

        &.warning_nums {
          width: 40px;
          margin-left: 0;
          justify-content: center;
          padding: 0;
        }
      }

      .el-select {
        width: 150px;
        height: 26px;
      }

      #group {
        width: 100px;
      }
    }

    .warningContent {
      height: 330px;
      overflow-y: auto;
    }
  }

  .vdr {
    position: relative !important;
    top: 0 !important;
    left: 0 !important;
    // bottom: 0 !important;
    height: 100% !important;
    width: 100% !important;
  }
</style>